/* 定义跨浏览器兼容函数*/

// 圆角边框
@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
}

@mixin box-sizing($box-sizing: border-box) {
    -webkit-box-sizing: #{$box-sizing};
    -moz-box-sizing: #{$box-sizing};
    box-sizing: #{$box-sizing};
}

// 文本溢出省略显示
@mixin text-ellipsis () {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@mixin clearfix() {
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}

// Better OSX font-rendering
@mixin font-smoothing() {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

// Cross-browser opacity
@mixin opacity($opacity) {
    opacity: $opacity;
    $opacity-ie: $opacity * 100;
    filter: alpha(opacity=$opacity-ie); //IE8
}

// Hyphenate text.
@mixin hyphens() {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    hyphens: auto;
}

// Better box-shadows.
@mixin box-shadow($shadow1, $shadow2:false, $shadow3:false) {
    $shadows: $shadow1;
    @if $shadow2 {
        $shadows: $shadow1, $shadow2;
    }
    @if $shadow3 {
        $shadows: $shadow1, $shadow2, $shadow3;
    }
    -webkit-box-shadow: $shadows;
    -moz-box-shadow: $shadows;
    box-shadow: $shadows;
}

//画出边框
@mixin outline($bg-color, $radius:4px) {
    border: 1px solid $bg-color;
    border-radius: $radius;
    @include box-shadow(none);
}

//----------------------------------------------------------------------
// Flexbox Justify Content
//
// The 'justify-content' property aligns flex items along the main axis
// of the current line of the flex container. This is done after any flexible
// lengths and any auto margins have been resolved. Typically it helps distribute
// extra free space leftover when either all the flex items on a line are
// inflexible, or are flexible but have reached their maximum size. It also
// exerts some control over the alignment of items when they overflow the line.
//
// Note: 'space-*' values not supported in older syntaxes.
//
// Values: flex-start | flex-end | center | space-between | space-around
// Default: flex-start
//
// http://w3.org/tr/css3-flexbox/#justify-content-property
@mixin justify-content($value: flex-start) {
    @if $value==flex-start {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
    }
    @else if $value==flex-end {
        -webkit-box-pack: end;
        -ms-flex-pack: end;
    }
    @else if $value==space-between {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
    }
    @else if $value==space-around {
        -ms-flex-pack: distribute;
    }
    @else {
        -webkit-box-pack: $value;
        -ms-flex-pack: $value;
    }
    -webkit-justify-content: $value;
    -moz-justify-content: $value;
    justify-content: $value;
}

//----------------------------------------------------------------------
// Flexbox Align Items
//
// Flex items can be aligned in the cross axis of the current line of the
// flex container, similar to 'justify-content' but in the perpendicular
// direction. 'align-items' sets the default alignment for all of the flex
// container's items, including anonymous flex items. 'align-self' allows
// this default alignment to be overridden for individual flex items. (For
// anonymous flex items, 'align-self' always matches the value of 'align-items'
// on their associated flex container.) 
//
// Values: flex-start | flex-end | center | baseline | stretch
// Default: stretch
//
// http://w3.org/tr/css3-flexbox/#align-items-property
@mixin align-items($value: stretch) {
    @if $value==flex-start {
        -webkit-box-align: start;
        -ms-flex-align: start;
    }
    @else if $value==flex-end {
        -webkit-box-align: end;
        -ms-flex-align: end;
    }
    @else {
        -webkit-box-align: $value;
        -ms-flex-align: $value;
    }
    -webkit-align-items: $value;
    -moz-align-items: $value;
    align-items: $value;
}

//----------------------------------------------------------------------
// Flexbox Align Content
//
// The 'align-content' property aligns a flex container's lines within the
// flex container when there is extra space in the cross-axis, similar to
// how 'justify-content' aligns individual items within the main-axis. Note,
// this property has no effect when the flexbox has only a single line.
//
// Values: flex-start | flex-end | center | space-between | space-around | stretch
// Default: stretch
//
// http://w3.org/tr/css3-flexbox/#align-content-property
@mixin align-content($value: stretch) {
    // No Webkit Box Fallback.
    -webkit-align-content: $value;
    -moz-align-content: $value;
    @if $value==flex-start {
        -ms-flex-line-pack: start;
    }
    @else if $value==flex-end {
        -ms-flex-line-pack: end;
    }
    @else {
        -ms-flex-line-pack: $value;
    }
    align-content: $value;
}

// flex
@mixin flex($align:false, $justify:false) {
    display: box; // OLD - Android 4.4- 
    display: -webkit-box; // OLD - iOS 6-, Safari 3.1-6 
    display: -moz-box; // OLD - Firefox 19- (buggy but mostly works) 
    display: -ms-flexbox; // TWEENER - IE 10 
    display: -webkit-flex; // NEW - Chrome 
    display: flex;
    @if $align {
        @include align-items($align);
    }
    @if $justify {
        @include justify-content($justify);
    }
}